<template>

    <van-search v-model="value" show-action label="地址" placeholder="请输入搜索关键词" @search="onSearch">
        <template #action>
            <div @click="onClickButton">搜索</div>
        </template>
    </van-search>
    <van-swipe :autoplay="2000" lazy-render>
        <van-swipe-item v-for="image in images" :key="image">
            <img :src="image" style="width: 100%;height: 350px;" />
        </van-swipe-item>
    </van-swipe>
    <van-grid :column-num="5">
        <van-grid-item v-for="value in 10" :key="value" icon="photo-o" text="文字" />
    </van-grid>
    <van-card num="2" price="2.00" desc="描述信息" title="商品标题"
        thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg">
        <template #tags>
            <van-tag plain type="primary">标签</van-tag>
            <van-tag plain type="primary">标签</van-tag>
        </template>
        <template #footer>
            <van-button size="mini" @click="$router.push('/shop')">加入购物车</van-button>  
        </template>
    </van-card>
    <van-card num="2" price="2.00" desc="描述信息" title="商品标题"
        thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
        @click="$router.push('/order')">
        <template #tags>
            <van-tag plain type="primary">标签</van-tag>
            <van-tag plain type="primary">标签</van-tag>
        </template>
        <template #footer>
            <van-button size="mini" >加入购物车</van-button>  
        </template>
    </van-card>
</template>
<script>
export default {
    setup() {
        const images = [
            'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
            'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
        ];
        return { images };
    },
};

</script>